<template>
  <h1 class="tagline">
    <span class="accent">Electron-Egg</span>
  </h1>

  <p class="description">目标捕获界面</p>

  <view class="radar-container" :style="{ width: width, height: height }">
    <view class="circle">
      <view class="point" @click="pointclick()"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: "Radar",
  props: {
    width: {
      type: String,
      default() {
        return "30vw";
      },
    },
    height: {
      type: String,
      default() {
        return "30vw";
      },
    },
  },

  methods: {
    pointclick() {
      console.log("我点击了雷达的点");
    },
  },
};
</script>

<style scoped>
.radar-container {
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
  place-items: center;
  background: #000000;
  width: 30vw;
  height: 30vw;
  box-shadow: #ccc 8rpx 8rpx 8rpx;
  overflow: hidden;
}

.radar-container .circle {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  --border-size: 3px;
  --border-angle: 0turn;
  --grid-bg: radial-gradient(
    transparent 69%,
    limegreen 69%,
    limegreen 70%,
    transparent 70%
  );
  --line-bg: transparent 50%, limegreen 50%, transparent 50.5%;
  background-image: conic-gradient(
      from var(--border-angle),
      transparent 10%,
      #0d0a 99%,
      limegreen 99.5%
    ),
    linear-gradient(0deg, var(--line-bg)),
    linear-gradient(45deg, var(--line-bg)),
    linear-gradient(90deg, var(--line-bg)),
    linear-gradient(135deg, var(--line-bg)), var(--grid-bg), var(--grid-bg),
    var(--grid-bg);
  background-size:
    cover,
    cover,
    cover,
    cover,
    cover,
    25% 25%,
    50% 50%,
    75% 75%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: solid 0.5vmin limegreen;
  -webkit-animation: bg-spin 3s linear infinite;
  animation: bg-spin 3s linear infinite;
  position: relative;
  filter: drop-shadow(0px 0px 10vmin black) blur(0.5px) contrast(200%);
}

@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

.circle::after {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 2vmin;
  height: 2vmin;
  background: limegreen;
  border-radius: 50%;
  /* -webkit-animation: move 18s steps(6) infinite;
  animation: move 18s steps(6) infinite; */
}

.point {
  content: "";
  display: block;
  position: absolute;
  top: 20%;
  left: 20%;
  width: 2vmin;
  height: 2vmin;
  background: limegreen;
  border-radius: 50%;
  /* -webkit-animation: move 18s steps(6) infinite;
  animation: move 18s steps(6) infinite; */
}

@-webkit-keyframes move {
  33% {
    transform: translate(25vmin, 10vmin);
  }
  66% {
    transform: translate(15vmin, 30vmin);
  }
  100% {
    transform: translate(0vmin, 0vmin);
  }
}

@keyframes move {
  33% {
    transform: translate(25vmin, 10vmin);
  }
  66% {
    transform: translate(15vmin, 30vmin);
  }
  100% {
    transform: translate(0vmin, 0vmin);
  }
}

.circle::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: solid 1vmin limegreen;
  -webkit-animation: scale 3s linear infinite;
  animation: scale 3s linear infinite;
}

@-webkit-keyframes scale {
  from {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  51%,
  100% {
    opacity: 0;
  }
}

@keyframes scale {
  from {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  51%,
  100% {
    opacity: 0;
  }
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}
</style>
